<!DOCTYPE html>
<html>
<head>
	<title>财物</title>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="stylesheet" type="text/css" href="../dist/css/reset.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/atom.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/common.css">
	<!-- dialog list 样式 -->
	<link rel="stylesheet" type="text/css" href="../dist/css/dialog.css">
	<link rel="stylesheet" type="text/css" href="../dist/css/font-awesome.min.css">

	<link href="../dist/js/mobiscroll/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
	<link href="../dist/js/mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
	<link href="../dist/js/mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<!-- header -->
	<header>
		<div class="left">
			<a onclick="javascript:window.history.back();"><i class="fa fa-angle-left"></i><em class="fw-normal">财务申请</em></a>
		</div>
		<!-- dropdown -->
		<div class="right">
			<i class="fa fa-list-ul" data-jq-dropdown="#jq-dropdown-1"></i>
		</div>
	</header>
	<!-- header END -->
	<section class="container bg-grey">
		<div class="form-control margin-minus mgt-2px timepicker">
			<label>借款选项</label>
			<span>
				<input type="text" readonly="readonly" data-target="sortListModel" name="finance_sort_0" class="dialog-list-picker" placeholder="预借">
				<i class="fa fa-angle-right fz-1_8"></i>
			</span>
		</div>
		<section>
			<div class="finance-blk" style="margin-top: -0.5rem;" data-index="0">
				<div class="finance-title">
					<span class="title-text">财务明细(1)</span>
					<a class="remove-one" href="javascript:void(0);">删除</a>
				</div>
				<div class="form-control margin-minus">
					<label>金额(元)</label>
					<span>
						<input type="text" name="finance_number_0" class="money" placeholder="500">
					</span>
				</div>
				<!-- 表单input必须以 '_x'结尾，新增项目时会顺序变化,_x之前可自命名 -->

				<div class="form-control margin-minus mgt-2px timepicker">
					<label>费用项目</label>
					<span>
						<input type="text" readonly="readonly" data-target="eventListModel" name="finance_event_0" class="dialog-list-picker" placeholder="差旅费">
						<i class="fa fa-angle-right fz-1_8"></i>
					</span>
				</div>
				<div class="form-control margin-minus mgt-2px" style="height:6rem;">
					<label>费用说明(至少20字)</label>
					<textarea class="apply-textarea" name="finance_desc_0" style="height:4rem;" placeholder="请输入报销说明(必填)"></textarea>
				</div>
				<div class="margin-minus new-one">
					<a class="add-one" href="javascript:void(0);">+&nbsp;&nbsp;新增报销明细</a>
				</div>
			</div>
		</section>
		<span class="pull-right total-money mgt-1">总金额: <em class="money-text">1800</em></span>
		<button class="btn btn-success mgt-1">提交申请</button>
	</section>
	
	<!-- overlay -->
	<div class="alert-overlay fade" id="alert-overlay"></div>
	<!-- dialog-list 数据层 -->
	<div class="dialog-list fade" id="sortListModel" >
		<ul class=" ">
			<li class="list-item" data-value="报销">报销</li>
			<li class="list-item" data-value="预借">预借</li>
			<li class="list-item" data-value="请款">请款</li>
		</ul>
	</div>
	
	<!-- dialog-list 数据层 -->
	<div class="dialog-list fade" id="eventListModel" >
		<ul class=" ">
			<li class="list-item" data-value="差旅费">差旅费</li>
			<li class="list-item" data-value="业务招待费">业务招待费</li>
			<li class="list-item" data-value="市内交通费">市内交通费</li>
			<li class="list-item" data-value="会议费">会议费</li>
			<li class="list-item" data-value="其他">其他</li>
		</ul>
	</div>
	

	<script type="text/javascript" src="../dist/js/jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../dist/js/equ.js"></script>
    <script src="../dist/js/mobiscroll/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
	<script src="../dist/js/mobiscroll/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
	<script src="../dist/js/mobiscroll/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
	<script src="../dist/js/mobiscroll/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
	<!-- S 可根据自己喜好引入样式风格文件 -->
	<script src="../dist/js/mobiscroll/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
	<script type="text/javascript" src="../dist/js/jquery.dialog-list.js"></script>

	<script type="text/javascript">
		$(".container").on("change",".money",function(){
			var amount = 0;
			$(".finance-blk .money").each(function(){
				amount += +$(this).val();
			});
			if(typeof amount != 'number'){
				amount = 0;
			}
			$(".money-text").html(amount);
		});

		// 点击新增事件
		$(".container").on("click",".add-one",function(){
			var index = $(this).parents(".finance-blk").attr("data-index");
			var one  = $(this).parents(".finance-blk").clone();
			var new_idx = +index+1;

			// 更改input的name属性
			one.find("input,textarea").each(function(){
				$(this).attr("name",$(this).attr("name").replace("_0","_"+new_idx));
			});
			// 新的表单的
			one.attr("data-index",new_idx);
			one.find(".title-text").html('报销明细('+(new_idx+1)+')');

			$(".container section").append(one);
		});

		$(".container").on("click",".remove-one",function(){
			$(this).parents(".finance-blk").remove();
		});

		// 时间组件初始化
	    $(function () {
			var currYear = (new Date()).getFullYear();	
			var opt={};
			opt.date = {preset : 'date'};
			//opt.datetime = { preset : 'datetime', minDate: new Date(2012,3,10,9,22), maxDate: new Date(2014,7,30,15,44), stepMinute: 5  };
			opt.datetime = {preset : 'datetime'};
			opt.time = {preset : 'time'};
			opt.default = {
				theme: 'android-ics light', //皮肤样式
		        display: 'modal', //显示方式 
		        mode: 'scroller', //日期选择模式
				lang:'zh',
		        startYear:currYear - 10, //开始年份
		        endYear:currYear + 10 //结束年份
			};

		  	var optDateTime = $.extend(opt['datetime'], opt['default']);
		  	var optTime = $.extend(opt['time'], opt['default']);
		    $("#startTime").mobiscroll(optDateTime).datetime(optDateTime);
	    });

	    // 列表弹窗初始化 
	    $("input[data-target=\"sortListModel\"]").dialogList();
	    $("input[data-target=\"eventListModel\"]").dialogList();
	</script>

</body>
</html>